/*
  模块化演变过程：
    1.文件划分方式
      污染全局作用域
      命名冲突问题
      无法管理模块依赖问题
      原始方式完全依靠约定
    2.命名空间方式
    3.IIFE
  
  模块化规范的出现：模块化规范 + 模块加载器
    CommonJS:
      一个文件就是一个模块
      每个模块都有单独的作用域
      通过module.exports导出成员
      通过require函数载入模块
    
  模块化标准规范：
    1. ES Modules  -> 浏览器（chrome, IE, safari, firefox）
    2. CommonJS -> Nodejs
    
    Commonjs in nodejs,
    ES Modules in Browsers

  ES Modules 基本特性：
    1. 自动采用严格模式，忽略 'use strict';
    2. 每个ESM模块都是单独的私有作用域；
    3. ESM是通过CORS去请求外部JS模块的；
    4. ESM的scripts标签会延迟执行脚本；
  
  ES Module in Nodejs(与CommonJS模块交互)
    ES Modules中可以导入CommonJS模块
    CommonJS中不能导入ES Module模块
    CommonJS始终只会导出一个默认成员
    注意import不是解构导出对象

  webpack工作模式：
    生产模式下，自动优化打包结果；
    开发模式下，自动优化打包速度，添加一些调试过程中的辅助；
    None模式下，运行最原始的打包，不做任何额外处理。

  webpack常用加载器分类：
    编译转换类：css-loader(将css文件转换为以JS形式工作的CSS模块)
    文件操作类：file-loader
    代码检查类：eslint-loader
  
  webpack模块的加载方式：
    遵循ES Modules标准的import声明
      import creatingHeader from './heading.js';
      import icon from './icon.png';
      import './main.css';
    遵循CommonJS标准的require函数
      const a = require('./a.js');
    遵循AMD标准的define函数和require函数
      define(['./heading.js', './icon.png'], (heading, icon) => {
        ...
      });
      require(['./heading.js', './icon.png'], () => {
        ...
      })
    样式代码中的@import指令和url函数
    HTML代码中图片标签的src属性
  
  loader机制是webpack的核心

  webpack常用插件：
    clean-webpack-plugin
    html-webpack-plugin
    copy-webpack-plugin
    MiniCssExtraPlugin - 提取css文件
    OptimizeCssAssetsWebpackPlugin - 压缩CSS

  webpack开发体验：
    编写源代码 -> webpack打包 -> 运行应用 -> 刷新浏览器
  webpack增强开发体验：
    自动编译
    自动刷新浏览器 webpack-dev-server 静态资源访问，代理API服务


  规范化标准： 规范化是我们践行前端工程化中重要的一部分
  
  为什么要有规范化标准：
    软件开发需要多人协同
    不同开发者具有不同的编码习惯和喜好
    不同的喜好增加项目的维护成本
    每个项目或者团队需要明确统一的标准

  哪里需要规范化标准：
    代码，文档，甚至是提交日志
    开发过程中人为编写的成果
    代码标准化规范最为重要
  
  实施规范化的方法：
    编码前人为的标准约定
    通过工具实现Lint

  常见的规范化实现方式：
    ESlint工具使用
    定制ESlint校验规则
    ESlint对Typescript的支持
    ESlint结合自动化工具或者webpack
    基于ESlint的衍生工具
    Stylint工具的使用

  ESlint介绍：
    最为主流的js lint工具，监测JS代码质量
    ESlint很容易统一开发者的编码风格
    ESlint可以帮助开发者提升编码能力

  ESlint安装步骤：
    初始化项目
    安装ESlint模块为开发依赖
    通过cli命令验证安装结果

  ESlint检查步骤：
    编写”问题代码“，
    使用ESlint执行检测
    完成ESlint使用配置

  stylint使用介绍：
    提供默认的代码检查规则
    提供cli工具，快速调用
    通过插件支持sass, less, postcss等
    支持gulp或webpack集成

  Git hooks介绍：
    git hooks也称为git钩子，每个钩子都对应一个任务
    通过shell脚本可以编写钩子任务触发时要具体执行的操作
    很多前端开发者不熟悉shell的使用，可以用Husky来实现git hooks的使用需求。

*/